<template>
  <div>
    <div style="text-align: right;margin-bottom: 20px">
      <el-button :disabled="selectedRows.length === 0" type="primary" @click="handleCheckPass">审核通过</el-button>
      <el-button
        :disabled="selectedRows.length === 0"
        type="danger"
        @click="handleCheckRefuse"
      >审核不通过</el-button>
      <el-tooltip class="item" effect="dark" content="新增" placement="top">
        <el-button
          type="primary"
          v-if="$auth('assets:add')"
          @click="handleEdit({}, 'add')"
          icon="el-icon-plus"
        />
      </el-tooltip>
    </div>
    <e-table
      ref="eTable"
      @tableCheck="handleTableCheck"
      @getList="handleGetList"
      :tableData="tableData"
      :columns="columns"
      :loading="loading"
      :total="total"
    >
      <el-table-column slot="selection" align="center" type="selection" width="55" />
      <el-table-column slot="state" label="资产状态" width="80px" align="center">
        <template slot-scope="scope">
          <el-tag :type="stateType(scope.row.assetsState)">{{stateWord(scope.row.assetsState)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column slot="picture" label="照片" width="110px" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.pictureUrl && scope.row.pictureUrl.length"
            type="text"
            @click="handlePreview(scope.row)"
          >{{scope.row.pictureUrl.length}}张</el-button>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column slot="printTime" label="最后打印时间" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.printTime ? formatY(scope.row.printTime) : null}}</span>
        </template>
      </el-table-column>
      <el-table-column slot="action" fixed="right" width="50" align="center">
        <template slot-scope="scope">
          <el-dropdown>
            <a class="el-dropdown-link">
              <i class="el-icon-menu"></i>
            </a>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="handleEdit(scope.row, 'edit')"
                v-if="$auth('assets:update')"
              >
                <a>编辑</a>
              </el-dropdown-item>
              <el-dropdown-item @click="handleDelete(scope.row)" v-if="$auth('assets:delete')">
                <a class="red">删除</a>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </e-table>
    <preview-modal ref="previewModal" />
  </div>
</template>

<script>
import PreviewModal from '@/components/PreviewModal'
import { openNotification, formatY, stateWord, stateType } from '@/utils/util'
import { checkList, deleteCheckList, checkDelete, checkPass } from '@/api/assetsNew'

export default {
  components: {
    PreviewModal
  },
  data() {
    return {
      tableData: [],
      total: 1,
      loading: false,
      columns: [
        { slot: 'selection' },
        {
          label: '资产编码',
          prop: 'assetsCode',
          width: '130px',
          align: 'left',
          fixed: 'left'
        },
        {
          label: '资产名称',
          prop: 'assetsName',
          tooltip: true,
          align: 'left',
          width: '220px',
          fixed: 'left'
        },
        {
          label: '资产类别',
          prop: 'categoryName',
          width: '200px'
        },
        { slot: 'state' },
        {
          label: '使用部门',
          prop: 'useDept'
        },
        {
          label: '区域',
          width: '140px',
          prop: 'areaName'
        },
        {
          label: '使用人',
          prop: 'useUser'
        },
        {
          label: '供应商',
          prop: 'supplier',
          tooltip: true,
          align: 'left',
          width: '220px'
        },
        {
          label: '生产厂家',
          prop: 'factory',
          tooltip: true,
          align: 'left',
          width: '220px'
        },
        {
          label: '品牌',
          prop: 'brand'
        },
        {
          label: '规格',
          prop: 'specification',
          width: '220px'
        },
        {
          label: '计量单位',
          prop: 'unit',
          float: 'fr'
        },
        { slot: 'buyDate' },
        {
          label: '折旧年限',
          prop: 'serviceLife',
          align: 'right'
        },
        { slot: 'expireDate' },
        {
          label: '资产原值',
          prop: 'price',
          align: 'right'
        },
        {
          label: '资产净值',
          prop: 'nowPrice',
          align: 'right'
        },
        {
          label: '归属部门',
          prop: 'belognDept'
        },
        {
          label: '管理员',
          prop: 'manageUser'
        },
        {
          label: '存放地点',
          prop: 'storageLocation',
          float: 'fl'
        },
        {
          label: '汇总数量',
          prop: 'summaryNumber',
          align: 'right'
        },
        { slot: 'photo' },
        { slot: 'printTime' },
        {
          label: '备注说明',
          width: '200px',
          prop: 'remark',
          align: 'left'
        },
        { slot: 'action' }
      ],
      queryParam: {
        pageNo: 1,
        pageSize: 10
      },
      selectedRows: []
    }
  },
  mounted() {
    this.handleGetList()
  },
  methods: {
    handlePreview(row) {
      let arr = []
      row.pictureUrl.map(v => {
        arr.push(v.url)
      })
      this.$refs.previewModal.show(arr)
    },
    stateWord(num) {
      return stateWord(num)
    },
    stateType(num) {
      return stateType(num)
    },
    formatY(time) {
      return formatY(time)
    },
    async handleGetList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign(this.queryParam, param)
      const res = await checkList(this.queryParam)

      if (res && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        this.tableData = records
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    },
    handleEdit(row, type) {
      this.$router.push({
        name: 'assetsDetail',
        params: { obj: row, type }
      })
    },
    async handleCheckPass() {
      // const param = JSON.stringify(this.selectedRows)
      let arr = []
      this.selectedRows.map(v => {
        arr.push(v.assetsId)
      })
      const res = await checkPass({ assetsIds: arr })
      if (res.state === '000000') {
        openNotification('success', '审核通过操作成功')
        this.handleGetList()
        this.selectedRows = []
      }
    },
    async handleCheckRefuse() {
      let arr = []
      this.selectedRows.map(v => {
        arr.push(v.assetsId)
      })
      const res = await checkDelete({ assetsId: arr })
      if (res.state === '000000') {
        openNotification('success', '审核不通过操作成功')
        this.handleGetList()
        this.selectedRows = []
      }
    },
    handleDelete(row) {
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除[${row.assetsName}]这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          // 调用删除接口，刷新表格数据
          const res = await deleteCheckList(row.assetsId, {})
          openNotification('success', '删除成功')
          _this.handleGetList()
        }
      })
    },
    handleTableCheck(arr) {
      this.selectedRows = arr
    }
  }
}
</script>
